{% extends "../layout/default.tpl" %}

{% import "../common/header.tpl" as headers %}

{% block body %}
{{ headers.header() }}
{% import "../common/content.tpl" as contents %}
<div class="for-bg">
  <div class="container clearfix">

    <div class="index-left">
      <div class="clearfix" style="position: relative;height:280px;overflow:hidden;">
        <ul class="carousel float-left" style="height:1400px;">
          <li><a href="#"><img src="/public/img/index_carousel01.jpg" alt=""></a></li>
          <li><a href="#"><img src="/public/img/index_carousel02.jpg" alt=""></a></li>
          <li><a href="#"><img src="/public/img/index_carousel03.jpg" alt=""></a></li>
          <li><a href="#"><img src="/public/img/index_carousel04.jpg" alt=""></a></li>
          {# <li><a href="#"><img src="/public/img/index_carousel01.jpg" alt=""></a></li> #}
        </ul>
        <ul class="indicator">
          <li class="is-active"></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
        <div class="float-left my-intro">
          <div class="about-me">
            <p class="name-title">关于博主</p>
            <p class="detail">个人资料：姓名，方姿平，男，九零后，IT男，天秤座，每天宅在家中 爱好：唱歌，打游戏</p>
          </div>
          <div class="about-me">
            <p class="name-title">关于且以永日书屋</p>
            <p class="detail">博客网站借鉴叶子姐的网站设计，向她学习，建站时间2019/7/30，坚持</p>
          </div>
        </div>
      </div>

      <div class="title clearfix">
        <span class="float-left">最新文章</span>
        <div class="float-right right-span">
          <a href="#">韶华追忆（247）</a>
          <a href="#">技术分享（35）</a>
        </div>
      </div>

      {{ contents.field(res) }}
      
    </div>
    <div class="index-right">
      <h4 class="right-title">关注我</h4>
      <ul style="text-align:center;" class="concat clearfix">
        <li>
          <a href="https://weibo.com/5996293209/profile?topnav=1&wvr=6" target="_blank">
            <i style="color:red" class="iconfont icon-weibo1"></i>
            <p>新浪微博</p>
          </a>
        </li>
        <li>
          <a href="#">
            <i style="color:#39C0FF;" class="iconfont icon-tengxunweibo"></i>
            <p>腾讯微博</p>
          </a>
        </li>
        <li>
          <a href="https://mail.qq.com/cgi-bin/frame_html?sid=NCrPBZnXU57ceVQJ&r=ce280d1955c32115386b266e9111ec8c" target="_blank">
            <i style="color:#019934;" class="iconfont icon-youxiang"></i>
            <p>邮箱</p>
          </a>
        </li>
        <li>
          <a href="#">
            <i style="color:#275593;" class="iconfont icon-fankuiguanli"></i>
            <p>意见反馈</p>
          </a>
        </li>
      </ul>


      {% include "../common/article.tpl" %}
      {% include "../common/link.tpl" %}

    </div>
  </div>
</div>
{% include "../common/footer.tpl" %}
{% include "../common/arrow.tpl" %}
<script>
  (function () {

    var timer = null
    var hidden, visibilityChange;
    var height = $('.carousel li').height()
    var moved = 0

    if (typeof document.hidden !== "undefined") {
      hidden = "hidden";
      visibilityChange = "visibilitychange";
    } else if (typeof document.mozHidden !== "undefined") {
      hidden = "mozHidden";
      visibilityChange = "mozvisibilitychange";
    } else if (typeof document.msHidden !== "undefined") {
      hidden = "msHidden";
      visibilityChange = "msvisibilitychange";
    } else if (typeof document.webkitHidden !== "undefined") {
      hidden = "webkitHidden";
      visibilityChange = "webkitvisibilitychange";
    }

    function movedFun() {
      timer = setInterval(function () {
        moved++
        if (moved == 4) {
          moved = 0
        }

        $('.carousel').animate({
          "margin-top": -moved * height
        }, 600)
        $(`.indicator li:nth-child(${moved+1})`).addClass('is-active').siblings().removeClass('is-active')
      }, 3000)
    }

    document.addEventListener(visibilityChange, function () {
      //console.log("当前页面是否被隐藏：" + document[hidden]);
      if (document[hidden]) {
        clearInterval(timer)
      } else {
        movedFun()
      }
    }, false);

    movedFun()

    $('.indicator li').hover(function(){
      $(this).addClass('is-active').siblings().removeClass('is-active')
      var index = $(this).index()
      //console.log(index)
      clearInterval(timer)
      moved = index
      $('.carousel').animate({
          "margin-top": -moved * height
      }, 600)
    },function(){
      movedFun()
    })
  })()
</script>
{% endblock %}